<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title id="t1">v-on 事件绑定[@]</title>
	<meta content="@等价于v-on">
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
	</script>
	<style>
		.capp1{
			width: 200px;
			height: 200px;
			background-color: bisque;
		}
	</style>
</head>
<body>
	
	<div id="app1">
		<input type="button" value="单击事件绑定" v-on:click="fun1">
		<input type="button" value="移动事件绑定" v-on:mousemove="fun2">
		<input type="button" value="移动事件绑定-@" @mousemove="fun2">
		<input type="button" value="双击事件绑定" v-on:dblclick="fun3">
		<h3 @click="change">{{food}}</h3>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var data = {
				msg:"Hi There!",
				name:"Sa_Zhang",
				food:"牛腩",
				cont:"<a href='www.baidu.com'>百度一下</a>",
				scores:[9,5,7,3,6,1]
			}
		// new Vue({}) 大小写敏感
		var app = new Vue({
			el:"#app1",
			data:data,
			methods:{
				fun1:function(){
					alert("触发事件1：" + data.msg);
				},
				fun2:function(){
					alert("触发事件2：" + data.name);
				},
				fun3:function(){
					alert("触发事件3：" + data.scores[0]);
				},
				change:function(){
					this.food = "牛腩好难炖啊";
				}
			}
		})
	</script>

</body>
</html>